<template>
  <div id="tablebox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="today-content commont-body-star">
        <div class="today-left">
          <div class="time-header-tips">
            本学期共
            <i>{{ allDay.length }}</i>天，上课<i>{{ allDay.length - activeDay.length }}</i>天，不上课<i>{{
              activeDay.length
            }}</i>天
            <el-button size="mini" @click="backTodayFn">今天</el-button>
          </div>
          <div v-if="mouth_body" class="rili-content">
            <div class="time_content" v-for="(item,index) in mouth_body" :key="index+'mouth'">
              <div class="time_content-in">
                <div class="time_content-header-title">
                  {{ item.year }}-{{ item.mouth }}
                </div>
                <div class="time_content-header">
                  <div v-for="(week, week_index) in weekday" :key="week_index+'week'" class="week-list">
                    {{ week }}
                  </div>
                </div>
                <div class="time_content-body">
                  <div class="day-list" v-for="start_box in item.start" :key="start_box+'start'"></div>
                  <div class="day-list" v-for="(day, day_index) in item.day" :key="day_index+'day'"
                       @click="getDayFn(day)" :class="{'active': timeDay==day.info.all}">
                    <p class="day-list-day" v-if="todayData!==day.info.all">{{ day.info.day }}</p>
                    <p class="day-list-day todayStatus" v-else>今</p>
                    <p class="day-list-test" v-if="activeDay.indexOf(day.day)!==-1">休</p>
                  </div>
                  <div class="day-list" v-for="end_box in item.end" :key="end_box+'end'"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="today-right">
          <div class="today-right-header">{{ timeDay }}单日校园总揽</div>
          <div class="today-right-centent">
            <div class="today-right-list" @click="pointVisible=true">
              <div class="today-right-list-number">
                <span class="today-number">{{ dataInit.food.food_number || 0 }}</span><span class="today-count">样</span><i>/</i><span
                  class="today-number">{{ dataInit.food.commnet || 0 }}</span><span
                  class="today-count">次</span>
              </div>
              <p class="today-right-list-name">职工菜品/点评</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <todayPoint :visible.sync="pointVisible" :pointTime="timeDay"></todayPoint>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {semesterEdit, holidayEdit, holidayNow} from '@/api/admin/setting'
import todayPoint from "@/views/admin/food/components/todayPoint";
import {foodCommentFn} from '@/api/admin/dataAllSchool'

export default {
  data() {
    return {
      lookStatus: false,
      weekday: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      mouth_body: null,
      activeDay: [],
      allDay: [],
      start_time: '', // 开学时间
      end_time: '', // 放假时间
      dayId: 0,
      timeDay: '',
      todayData: '',
      pointVisible: false,
      dataInit: {
        food: {}
      },
      timeNumberFn: null
    }
  },
  components: {todayPoint},
  computed: {
    ...mapGetters(['configData']),
  },
  created() {
    // this.getAllDate('2022-09-01', '2022-10-10', 2)
    this.updateTime()  // 今天
  },
  methods: {
    updateTime() {
      let cd = new Date()
      this.timeDay = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
      this.todayData = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
      this.getIntfFn()
      this.initDataFn()
      this.getTimeDataFn() //轮询
    },
    zeroPadding(num, digit) {
      let zero = ''
      for (let i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    },
    backTodayFn() {
      this.clearDataFn()
      this.timeDay = this.todayData
      this.initDataFn()
      this.getTimeDataFn() //轮询
    },
    clearDataFn() {
      console.log('关闭时间')
      if (this.timeNumberFn) {
        clearInterval(this.timeNumberFn)
      }
    },
    getTimeDataFn(){
      let that = this
      this.timeNumberFn = setInterval(() => {
        that.initDataFn()
      }, 3000)
    },
    initDataFn() {
      let that = this
      foodCommentFn({start_time: this.timeDay}).then(res => {
        console.log('数据：', res)
        let data_ = {
          commnet: res.commnet,
          food_number: res.food_number
        }
        this.$set(this.dataInit, 'food', data_)
      })
    },
    // 获取当天数据
    getIntfFn() {
      this.getAllTimeFn()
    },
    getAllTimeFn() {
      semesterEdit().then(res => {
        if (res.vo.time && res.vo.end_time) {
          this.start_time = res.vo.time // 开学时间
          this.end_time = res.vo.end_time // 放假时间
          this.holidayNowFn()
        } else {
          this.$confirm('未设置开学/放假日期，请联系管理员！', '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      })
    },
    // 查询当天数据
    getDayFn(option) {
      // 1 未来 2 之前 3 今天
      if (option.info.dayType === 1) {
        this.$message.error('未到时间')
        return
      }
      this.clearDataFn()
      this.timeDay = option.day
      this.initDataFn()
      this.getTimeDataFn() //轮询
    },
    // 获取后台设置
    holidayNowFn() {
      holidayNow().then(res => {
        if (!res.detail) {
          this.getAllDate(1)
        } else {
          this.dayId = res.detail.id
          this.activeDay = res.detail.holiday.split(',')
          this.getAllDate(2)
        }
      })
    },
    getAllDate(type) {
      let start = this.start_time;
      let end = this.end_time;
      let n = this
      let format = (time) => {
        let ymd = ''
        let mouth = (time.getMonth() + 1)
        let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
        ymd += time.getFullYear() + '-' // 获取年份。
        ymd += mouth + '-' // 获取月份。
        ymd += day // 获取日。
        //m.df格式
        let oDateDay = new Date(ymd); // 今天
        let oDate = new Date(this.timeDay); // 今天
        let dayType = '' // 1 未来 2 之前 3 今天
        if (oDateDay.getTime() > oDate.getTime()) {
          dayType = 1
        } else if (oDateDay.getTime() < oDate.getTime()) {
          dayType = 2
        } else if (oDateDay.getTime() === oDate.getTime()) {
          dayType = 3
        }
        return {all: ymd, year: time.getFullYear(), mouth: mouth, day: day, dayType: dayType} // 返回日期。
      }
      let dateArr = []
      let startArr = start.split('-')
      let endArr = end.split('-')
      let db = new Date()
      db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
      db.setHours(0, 0, 0, 0)
      let de = new Date()
      de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
      de.setHours(0, 0, 0, 0)
      let unixDb = db.getTime()
      let unixDe = de.getTime()
      let stamp
      let oneDay = 24 * 60 * 60 * 1000;
      for (stamp = unixDb; stamp <= unixDe;) {
        let f = new Date(parseInt(stamp));
        let week = f.getDay()//计算出星期几
        if (type === 1) {
          if (n.weekday[week] === '星期日' || n.weekday[week] === '星期六') {
            this.activeDay.push(format(f).all)
          }
        }
        dateArr.push({day: format(f).all, week: n.weekday[week], info: format(f)})
        stamp = stamp + oneDay
      }
      this.allDay = JSON.parse(JSON.stringify(dateArr))
      this.getWeekFn(dateArr)
      return dateArr
    },
    // 重组数据内容
    getWeekFn(dateArr) {
      let year_mouth = {}
      for (let item of dateArr) {
        let a_ = item.day.split('-');
        if (year_mouth[a_[1] + '月']) {
          year_mouth[a_[1] + '月'].push(item)
        } else {
          year_mouth[a_[1] + '月'] = [item]
        }
      }
      let list_ = []
      for (let item in year_mouth) {
        list_.push({
          mouth: item,
          dayTime: year_mouth[item][0].day,
          year: year_mouth[item][0].info.year,
          day: year_mouth[item],
          start: this.weekday.indexOf(year_mouth[item][0].week),
          end: 6 - this.weekday.indexOf(year_mouth[item][year_mouth[item].length - 1].week),
        })
      }
      this.mouth_body = JSON.parse(JSON.stringify(list_))
    }
  },
  // 离开当前页面后执行
  destroyed: function () {
    this.clearDataFn()
  }
}
</script>


<style scoped>
.commont-body-star {
  height: calc(100vh - 170px);
}

.today-content {
  display: flex;
}

.today-left {
  overflow-y: auto;
  width: 352px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

.today-right {
  border: 1px solid #999;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.today-right-header {
  height: 40px;
  border-bottom: 1px solid #999;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.today-right-centent {
  flex: 1;
  padding: 10px;
}

.rili-content {
  overflow: hidden;
  flex: 1;
  overflow-y: auto;
}

.today-right-list {
  float: left;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  width: 115px;
  padding: 10px;
  align-items: center;
  cursor: pointer;
}

.today-right-list-number {
  display: flex;
  align-items: center;
}

.today-right-list-number i {
  margin: 5px;
}

.today-right-list-number .today-number {
  color: #006dcd;
  font-size: 26px;
  font-weight: bold;
}

.today-right-list-number .today-count {
  font-size: 12px;
}

.today-right-list-name {
  color: #777;
  font-size: 14px;
}

.today-right-list:hover {
  background: #eee;
}

/*start*/
.time_content-header-title {
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.time_content {
  margin-right: 10px;
  margin-bottom: 10px;
}

.time_content-in {
  width: 352px;
  border: 1px solid #ddd;
  background: #fff;
}

.time_content-header {
  background: #ddd;
  overflow: hidden;
}

.week-list {
  width: 50px;
  height: 30px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.time_content-body {
  overflow: hidden;
}

.day-list {
  width: 50px;
  height: 50px;
  float: left;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.day-list:hover {
  background: #96e570 !important;
}

.day-list.active {
  background: #96e570 !important;
}

.day-list:nth-child(7n-6) {
  background: #eee;
}

.day-list:nth-child(7n) {
  background: #eee;
  border-right: none;
}

.day-list-day {
  text-align: center;
  height: 30px;
  line-height: 30px;
  width: 100%;
}

.day-list-test {
  width: 15px;
  height: 15px;
  background: red;
  font-size: 10px;
  color: #fff;
  border-radius: 50%;
  text-align: center;
}

.day-footer {
  text-align: center;
}

.time-header-tips {
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
}

.time-header-tips i {
  color: #ef6f14;
  font-size: 16px;
  margin: 0 3px;
  font-weight: bold;
}

.todayStatus {
  font-weight: bold;
}

/*end*/
</style>
